<template>
  <div class="product-area">
    <h2>手机专区</h2>
    <div class="product" v-for="item in phoneList" :key="item.id">
      <h3>{{ item.name }}</h3>
      <p>价格：¥{{ item.price }}</p>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Phone',
  props: {
    phoneList: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.product-area {
  margin-left: 220px;
}
.product {
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px 0;
}
</style>